<template>
  <div class="app-container">
    <div class="container-info">
      <div class="filter-container">
        <el-form :inline="true" :model="searchObject">
          <el-form-item :label="$t('dictItemList.itemText')">
            <el-input v-model="searchObject.itemText" :placeholder="$t('dictItemList.itemText')" clearable />
          </el-form-item>
          <el-form-item :label="$t('dictItemList.itemValue')">
            <el-input v-model="searchObject.itemValue" :placeholder="$t('dictItemList.itemValue')" clearable />
          </el-form-item>

          <el-form-item>
            <el-button type="success" icon="el-icon-search" @click="queryList">{{ $t('dictList.query') }}</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="insert">{{ $t('dictList.addDict') }}</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-loading="listLoading" class="content-container">
        <el-table
          v-loading="listLoading"
          :data="list"
          :element-loading-text="$t('loading.text')"
          border
          fit
          highlight-current-row
        >
          <el-table-column align="center" :label="$t('dictItemList.id')" width="95">
            <template slot-scope="scope">
              {{ (searchObject.pageIndex - 1 ) * searchObject.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"

            :label="$t('dictItemList.itemText')"
          >
            <template slot-scope="scope">
              {{ scope.row.itemText }}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('dictItemList.itemValue')"
            align="center"
            width="100"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.itemValue }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('dictItemList.tenantId')" width="110" align="center">
            <template slot-scope="scope">
              {{ scope.row.tenantId }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('dictItemList.validState')" width="110" align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.validState | statusFilter">
                {{ statusMap[scope.row.validState] }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('dictItemList.remark')"
            align="center"
            width="100"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.remark }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('dictItemList.operatorName')" width="110" align="center">
            <template slot-scope="scope">
              {{ scope.row.operatorName + '-' + scope.row.operatorId }}
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('dictItemList.operatorDate')" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.updateTime || scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-row>
                <el-col :span="12">
                  <el-button type="primary" size="mini" plain icon="el-icon-edit" @click="update(scope.row)">{{ $t('dictList.update') }}</el-button>
                </el-col>

                <el-col :span="12">
                  <el-button type="danger" size="mini" plain icon="el-icon-delete" @click="deleteDict(scope.row)">{{ $t('dictList.deleted') }}</el-button>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>

      </div>
      <div class="page-footer">
        <pagination v-show="total>0" :total="total" :page.sync="searchObject.pageIndex" :limit.sync="searchObject.pageSize" style="float:right;" @pagination="queryList" />
      </div>

      <div>
        <el-dialog
          v-if="showInsertDialog.visible"
          :title="showInsertDialog.title"
          :visible.sync="showInsertDialog.visible"
          :width="showInsertDialog.width"
          append-to-body
          center
          :before-close="handleClose"
        >
          <addForm ref="insert" :dict-id="showInsertDialog.data" @queryList="queryList" @close="closeInsert" />
        </el-dialog>

        <el-dialog
          v-if="showUpdateDialog.visible"
          :title="showUpdateDialog.title"
          :visible.sync="showUpdateDialog.visible"
          :width="showUpdateDialog.width"
          append-to-body
          center
          :before-close="handleClose"
        >
          <updateForm ref="updateForm" :dict-item-info.sync="showUpdateDialog.data" @queryList="queryList" @close="closeUpdate" />

        </el-dialog>
      </div>

    </div>
  </div>
</template>

<script>
import store from '@/store'
import { generateTitle } from '@/utils/i18n'
import Pagination from '@/components/Pagination'
import { getList, deleteDictItem } from '@/api/dictItem'
import addForm from './add.vue'
import updateForm from './update.vue'
import deepClone from 'clone-deep'

export default {
  name: 'DictItemList',
  components: { Pagination, addForm, updateForm },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'info',
        1: 'success'
      }
      return statusMap[status]
    }
  },
  props: {
    dictInfo: {
      type: Object,
      require: true,
      default: null
    }
  },
  data() {
    return {
      dict: {
        dictId: null,
        dictName: null,
        dictCode: null,
        remark: null,
        tenantId: store.getters.tenantId,
        validState: 1
      },
      searchObject: {
        dictItem: '',
        itemText: '',
        itemValue: '',
        status: null,
        tenantId: store.getters.tenantId,
        pageIndex: 1,
        pageSize: 10
      },
      paginationObj: {
        pageSize: 1,
        rowCount: 10
      },
      statusList: [
        {
          label: '正常',
          value: 1
        },
        {
          label: '停用',
          value: 0
        }
      ],
      companyList: [],
      companyMap: {},
      statusMap: { 1: '正常', 0: '停用' },
      list: [],
      listLoading: true,
      total: 0,
      previewOptions: {
        width: 850
      },
      deptOptions: [],
      showUpdateDialog: {
        // 弹窗组件传递数据
        title: '修改',
        visible: false,
        width: '800',
        name: '修改', // 组件名,
        loading: false,
        data: '',
        fullscreen: false,
        closeOnPressEscape: false,
        direction: 'rtl'
      },
      showInsertDialog: {
        title: '新增',
        visible: false,
        width: '',
        name: '', // 组件名,
        loading: false
      }
    }
  },
  watch: {
    dictInfo: {
      handler(newValue, oldValue) {
        this.dict = deepClone(newValue)
      },
      deep: true
    }
  },
  created() {
    this.dict = deepClone(this.dictInfo)
    this.searchObject = {
      dictId: this.dict.dictId,
      itemText: '',
      itemValue: '',
      validState: null,
      tenantId: store.getters.tenantId,
      pageIndex: 1,
      pageSize: 10
    }
    this.queryList()
  },
  mounted() {

  },
  methods: {
    insert() {
      this.$nextTick(() => {
        this.showInsertDialog.data = this.dict.dictId
        this.showInsertDialog.visible = true
      })
    },
    closeInsert() {
      this.$nextTick(() => {
        this.showInsertDialog.visible = false
      })
    },
    update(row) {
      this.showUpdateDialog.data = row
      this.$nextTick(() => {
        this.showUpdateDialog.visible = true
      })
    },
    closeUpdate() {
      this.$nextTick(() => {
        this.showUpdateDialog.visible = false
      })
    },
    handleClose(done) {
      this.$confirm(this.$t('action.confirmClose'))
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    generateTitle,
    queryList() {
      this.listLoading = true
      var param = this.searchObject
      getList(param).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.$nextTick(() => {
          this.listLoading = false
        })
      })
    },
    handleDeptChange(value) {
      console.log(value)
    },
    deleteDict(row) {
      this.$confirm(this.$t('action.confirmDelete'))
        .then(_ => {
          const postData = {
            dictId: this.dictInfo.dictId,
            itemId: row.itemId,
            tenantId: row.tenantId
          }
          const _that = this
          _that.listLoading = true
          deleteDictItem(postData).then(response => {
            _that.listLoading = false
            this.$message('删除成功')
            this.$nextTick(() => {
              this.listLoading = false
            })
            _that.queryList()
          }).catch(function(error) {
            _that.listLoading = false
            console.error(error)
          })
        })
        .catch(_ => {})
    }

  }
}
</script>

<style  rel="stylesheet/scss" lang="scss">

.line{
  text-align: center;
}
.el-drawer:focus {
    outline: none;
}
.custom_drawer__content{
    margin: 5px 20px;
    align-content: center;
}
.el-drawer__header{
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #72767b;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 32px;
    padding: 20px 20px 0;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    font-weight: 600;
}
.drawer {
  overflow: scroll;
}
.page-footer{
  width: 100%;
    height: 50px;
}
</style>

